<template>
    <div class="menu-page">
        <div class="top-group">
            <div class="top-select" @click="show = true">
                {{ getTime(currentDate) }}
                <van-icon name="arrow-down" />
            </div>
        </div>
        <!-- <div class="table-top">
            <div>账号名称</div>
            <div>余额</div>
        </div> -->
        <div class="table-wrapper">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                <div class="table-row">
                    <div>今日入账金额</div>
                    <div @click="goDetail('', 1, 2)">￥{{ day_in }}</div>
                </div>
                <div class="table-row">
                    <div>本月入账金额</div>
                    <div @click="goDetail('', 2, 2)">￥{{ month_in }}</div>
                </div>
                <div class="table-row">
                    <div>今日出账金额</div>
                    <div @click="goDetail('', 1, 1)">￥{{ day_out }}</div>
                </div>
                <div class="table-row">
                    <div>本月出账金额</div>
                    <div @click="goDetail('', 2, 1)">￥{{ month_out }}</div>
                </div>
                <div class="table-row" v-for="item in list" :key="item.id">
                    <div>{{ item.account.title ? item.account.title : item.title }}</div>
                    <div @click="goDetail(item.id, 1, '')">￥{{ item.balance }}</div>
                </div>
            </van-list>
            <div class="table-row-tool">
                <div>汇总</div>
                <div>￥{{ total }}</div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
                @cancel="show = false" @confirm="confirmTime" />
        </van-popup>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    name: 'MenuPage',
    data() {
        return {
            page: 0,
            // year: new Date().getFullYear(),
            // month: new Date().getMonth() + 1,
            currentDate: new Date(),
            maxDate: new Date(),
            minDate: new Date(2020, 0, 1),
            show: false,
            loading: true,
            finished: false,
            list: [],
            total: 0,
            day_in: 0,
            day_out: 0,
            month_in: 0,
            month_out: 0,
        }
    },
    mounted() {
        this.onLoad()
    },
    methods: {
        onLoad() {
            this.page = 0
            this.list = []
            this.loading = true
            this.finished = false
            this.getList()
        },
        // id客户id，type:1日2月，state:1出账2入账''全部
        goDetail(id, type, state) {
            this.$router.push({
                path: '/IandEDetail',
                query: {
                    id,
                    time: this.getTime(this.currentDate),
                    type,
                    state
                }

            })
        },
        confirmTime(val) {
            this.show = false
            this.onLoad()
        },
        getTime(val) {
            return moment(val).format('YYYY-MM-DD')
        },
        getList() {
            if (this.finished) {
                return
            }
            this.loading = true
            this.$api.account_lists({
                day: this.getTime(this.currentDate),
                page: ++this.page,
            }).then(res => {
                this.loading = false
                this.list.push(...res.data.lists.data)
                this.total = res.data.balance_count
                this.day_in = res.data.day_in
                this.day_out = res.data.day_out
                this.month_in = res.data.month_in
                this.month_out = res.data.month_out
                if (res.data.lists.data < 10) {
                    this.finished = true
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.menu-page {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background-color: #fff;

    .top-group {
        padding: 0 .4rem;
        background-color: #50b1c1;
        height: 50px;
        display: flex;
        // justify-content: space-around;
        align-items: center;
        font-size: 16px;
        color: #fff;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1;

        .top-select {
            display: flex;
            align-items: center;

            .van-icon {
                margin-left: 2px;
                font-size: 14px;
            }
        }
    }

    .table-top {
        padding: 0 .4rem;
        background-color: #f6f6f6;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #000;
        position: sticky;
        z-index: 1;
        top: 50px;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;

        div {
            display: flex;
            align-items: center;

            .icon {
                width: .35rem;
                margin-left: 6px;
            }
        }
    }

    .table-wrapper {
        padding-bottom: 60px;

        .table-row {
            margin: 0 .4rem;
            min-height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #000;
            // position: sticky;
            // top: 50px;
            width: calc(100% - .8rem);
            border-bottom: 1px solid #e0e0e0;

            div {}
        }

        .table-row-tool {
            padding: 0 .4rem;
            min-height: 50px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-top: 1px solid #e0e0e0;
            z-index: 1;
        }
    }
}
</style>